<template>
    <div class="management1">
        <header>
            <Row>
                <Col :xs="24">
                    <div class="margin-up-down">
                        <fourLevelLinkage
                            @changeProvince="changeProvince"
                            @changeCity="changeCity"
                            @changeArea="changeArea"
                            @changeHospital="changeHospital"
                            :province="province"
                            :city="city"
                            :area="area"
                            :hospital="hospital"
                            :isBack="isBack"
                        ></fourLevelLinkage>
                        </div>
                        <div class="margin-up-down">
                            <Input
                                v-model.trim="val"
                                placeholder="请输入医疗机构名称检索"
                                style="width: 200px;"
                                clearable
                            />
                        </div>
                        <div class="margin-up-down">
                            <Input
                                v-model="memberName"
                                placeholder="请输入患者名称检索"
                                style="width: 150px"
                                clearable
                            />
                        </div>
                    <div class="margin-up-down" style="margin-top:20px">
                        <DatePicker type="daterange" v-model="time" placement="bottom-end" placeholder="请选择申请日期" separator='至' format="yyyy-MM-dd" style="width: 200px"></DatePicker>
                    </div>
                    <div class="margin-up-down">
                        <Button type="primary" icon="ios-search" @click="search" class="btn"></Button>
                        <Button @click="modalReset" icon="icon-gengxin"  class="btn">
                            <i class = "iconfont icon-gengxin" style="font-size:14px;margin-right:5px"></i>
                        </Button>
                    </div>
                </Col>
            </Row>
        </header>
        <Table stripe :columns="columns1" :data="tableList"></Table>
        <div style="text-align:center;margin:10px 0;">
            <Page :total="homeSize" :current='pageNo' :page-size="pageSize" show-total show-elevator @on-change="pageChange"/>
        </div>
        <Modal
            v-model = "modalStatus"
            width='700'
            :closable='false'
            :mask-closable="false"
            footer-hide>
            <h2 style='text-align:center;border-bottom:1px solid #ccc;line-height:50px;'>病历邮寄</h2><br>
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
                <div class="main">
                    <p class="title">基本信息</p>
                    <div class="box">
                        <Row style="margin-bottom:10px">
                            <Col span="12">
                                <h3>快递公司&nbsp;:&nbsp;顺丰快递</h3>
                            </Col>
                            <Col span="12">
                                <h3>运单号&nbsp;:&nbsp;{{orderId}}</h3>
                            </Col>
                        </Row>
                    </div>
                </div>
                <div class="main">
                    <p class="title">寄件方</p>
                    <div class="box">
                        <Row>
                            <Col span="24">
                                <FormItem label="机构名称：" prop="hospitalName">
                                    <Input v-model="formValidate.hospitalName" readonly placeholder="输入机构名称"></Input>
                                </FormItem>
                            </Col>
                            <Col span="12">
                                <FormItem label="寄件人：" prop="linkman"> 
                                    <Input v-model="formValidate.linkman" readonly placeholder="输入寄件人姓名"></Input>
                                </FormItem>
                            </Col>
                            <Col span="12">
                                <FormItem label="寄件人电话：" prop="telephone">
                                    <Input v-model="formValidate.telephone" readonly placeholder="输入寄件人电话" ></Input>
                                </FormItem>
                            </Col>
                            <Col span="7">
                                <FormItem label="所在省份：" prop="provinceCode"> 
                                    <Input v-model="formValidate.provinceCode" readonly placeholder="" style='width:80px;'></Input>
                                </FormItem>
                            </Col>
                            <Col span="8">
                            <FormItem label="所在城市：" prop="cityCode"> 
                                    <Input v-model="formValidate.cityCode" readonly placeholder="" style='width:90px;'></Input>
                                </FormItem>
                            </Col>
                            <Col span="9">
                                <FormItem label="所在县/区：" prop="districtCode"> 
                                    <Input v-model="formValidate.districtCode" readonly placeholder="" style='width:95px;'></Input>
                                </FormItem>
                            </Col>
                            <!-- <Col span="20" offset='2' style="margin:0 0 20px 60px">
                                <span>所在地区</span>&nbsp;&nbsp;
                                <newfourLevelLinkage
                                    @changeProvince="changeProvince"
                                    @changeCity="changeCity"
                                    @changeArea="changeArea"
                                    :province="3"
                                    :city="9"
                                    :area="151"
                                ></newfourLevelLinkage>
                            </Col> -->
                            <Col span="24">
                                <FormItem label="寄件地址：" prop="hosAddr">
                                    <Input v-model="formValidate.hosAddr" readonly placeholder="输入寄件地址"></Input>
                                </FormItem>
                            </Col>
                        </Row> 
                    </div>
                </div>
                <div class="main">
                    <p class="title">收件方</p>
                    <div class="box">    
                        <Row>
                            <Col span="12">
                                <FormItem label="收件人：" prop="receiverName">
                                    <Input v-model="formValidate.receiverName" readonly placeholder="输入收件人姓名"></Input>
                                </FormItem>
                            </Col>
                            <Col span="12">
                                <FormItem label="收件人电话：" prop="phoneNumber">
                                    <Input v-model="formValidate.phoneNumber" readonly placeholder="输入收件人电话"></Input>
                                </FormItem>
                            </Col>
                            <Col span="7">
                                <FormItem label="所在省份：" prop="province">
                                    <Input v-model="formValidate.province" readonly placeholder="" style='width:80px;'></Input>
                                </FormItem>
                            </Col>
                            <Col span="8">
                            <FormItem label="所在城市：" prop="city"> 
                                    <Input v-model="formValidate.city" readonly placeholder="" style='width:90px;'></Input>
                                </FormItem>
                            </Col>
                            <Col span="9">
                                <FormItem label="所在县/区：" prop="area"> 
                                    <Input v-model="formValidate.area" readonly placeholder="" style='width:95px;'></Input>
                                </FormItem>
                            </Col>
                            <Col span="24">
                                <FormItem label="收件地址：" prop="addrInfo">
                                    <Input v-model="formValidate.addrInfo" readonly placeholder="输入收件地址"></Input>
                                </FormItem>
                            </Col>
                        </Row> 
                    </div>
                </div>
            </Form>
            <div style='textAlign: center;'>
                <Button type='primary' @click='handleSubmit("formValidate")' :disabled="isDisable" class="mainbtn">
                    <Icon type="ios-checkmark" style="margin-right: 5px" />邮寄
                </Button>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <Button @click='handleReset("formValidate")'  class="mainbtn">
                    <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>取消
                </Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import api from "@/api/commonApi";
import fourLevelLinkage from "@/components/fourLevelLinkage";
import newfourLevelLinkage from "@/components/newfourLevelLinkage";
import aesUtils from "@/plugins/aes-utils.js";
import Utils from "@/utils";
import store from "@/store";
import { DatePicker } from "view-design";
let nowDate = new Date();
let date = {
  year: nowDate.getFullYear(),
  month: nowDate.getMonth() + 1,
  date: nowDate.getDate()
}
export default {
    components: {
        fourLevelLinkage,
        newfourLevelLinkage,
        DatePicker
    },
    data() {
        return {
            lineid:null,
            isDisable: false,
            modalStatus:true,
            modalStatus:false,
            time: [],
            province: null,
            city: null,
            area: null,
            hospital: null,
            isBack:1,
            memberName:null,
            tableList: [],
            val: "",
            homeSize: 10,
            orderId:'',
            formValidate: {
                hospitalName:null,
                addrInfo:'',
                receiverName:'',
                phoneNumber:'',
                linkman:'',  
                telephone:'',  
                hosAddr:'',
                provinceCode:'',
                cityCode:'',
                districtCode:'',
                province:'',  
                city:'',  
                area:'',
            },
            ruleValidate: {
                addrInfo: [{ required: true, message: '请输入收件地址', trigger: 'blur'}],
                receiverName: [{ required: true, message: '请输入收件人姓名', trigger: 'blur'}],
                phoneNumber: [{ required: true, message: '请输入收件人电话', trigger: 'blur'}],
                provinceCode: [{ required: true, message: '请输入收件人所在省份', trigger: 'blur'}],
                cityCode: [{ required: true, message: '请输入收件人所在城市', trigger: 'blur'}],
                districtCode: [{ required: true, message: '请输入收件人所在区县', trigger: 'blur'}],
                hospitalName: [{ required: true, message: '请输入寄件人机构名称', trigger: 'blur'}],
                hosAddr: [{ required: true, message: '请输入寄件人地址', trigger: 'blur' }],
                linkman: [{ required: true, message: '请输入寄件人姓名', trigger: 'blur' }],
                telephone: [{ required: true, message: '请输入寄件人电话', trigger: 'blur'}],
                province: [{ required: true, message: '请输入寄件人所在省份', trigger: 'blur'}],
                city: [{ required: true, message: '请输入寄件人所在城市', trigger: 'blur'}],
                area: [{ required: true, message: '请输入寄件人所在区县', trigger: 'blur'}],
            },
            columns1:[
                {
                    title: '排序',
                    key: 'sum',
                    align: 'center',
                    width: 80,
                    render: (h, params) => {
                        let sum = (this.pageNo-1)*this.pageSize + params.index +1;
                        return h("span", sum);
                    }
                },
                {
                    title: '申请时间',
                    key: 'applicationTime',
                    align: 'center',
                    width: 150,
                    render: (h,params) => {
                        return h("span", {}, params.row.createTime);
                    }
                },
                {
                    title: '患者姓名',
                    key: 'memberName',
                    align: 'center',
                },
                {
                    title: '住院时间',
                    key: 'hospitalStayTime',
                    align: 'center',
                    render: (h,params) => {
                        let inpatient = params.row.inpatientDto
                        return h("span", {}, inpatient.hospitalStayTime);
                    }
                },
                {
                    title: '机构名称',
                    key: 'hospitalName',
                    align: 'center',
                },
                {
                    title: '住院科室',
                    key: 'inpatienDep',
                    align: 'center',
                    width: 100,
                    render: (h,params) => {
                        let inpatient = params.row.inpatientDto
                        return h("span", {}, inpatient.inpatienDept);
                    }
                },
                {
                    title: '住院天数',
                    key: 'hospitalDays',
                    align: 'center',
                    width: 90,
                    render: (h,params) => {
                        let a = params.row.inpatientDto
                        if(a.hospitalDays=='-1'){
                            a.hospitalDays = '暂无'
                        }
                        return h("span", {}, a.hospitalDays);
                    }
                },
                {
                    title: '复印张数',
                    key: 'mrCopyNumber',
                    align: 'center',
                    width: 90,
                },
                {
                    title: '复印费用',
                    key: 'mrCopyPrice',
                    align: 'center',
                    width: 90,
                },
                {
                    title: '收件人姓名',
                    key: 'receiverName',
                    align: 'center',
                },
                {
                    key: "curStatus",
                    title: "状态",
                    align: "center",
                    width: 90,
                    render: (h, params) => {
                        let status = params.row.curStatus;
                        let statusText;
                        switch (status) {
                            case 1:
                                statusText = "待支付";
                                break;
                            case 2:
                                statusText = "待邮寄";
                                break;
                            case 3:
                                statusText = "邮寄中";
                                break;
                            case 4:
                                statusText = "已完成";
                                break;
                            case 8:
                                statusText = "已关闭";
                                break;
                            case 9:
                                statusText = "已退款";
                                break;
                        }
                        return h("span", {}, statusText);
                    }
                },
                {
                    title:"设置",
                    align: 'center',
                    render: (h,params) => {
                        let a = params.row.id
                        let hospitalName = params.row.hospitalName
                        let addrId = params.row.addrId
                        return h('div', [
                            h('a', {
                                on: {
                                    click: () => {
                                        this.functionJS.queryNavgationTo(this,'/index/comprehensive/medicalrecord/detail',{Id:a})
                                    }
                                }
                            }, '详情'),
                            params.row.curStatus ==2 ?
                            " | " : null,
                            params.row.curStatus ==2 ?
                                h('a', {
                                    on: {
                                        click: () => {
                                            this.lineid = params.row.id
                                            let status = params.row.curStatus
                                            this.$axios.post(api.findAddressByDeliver,{addrId:addrId,hospitalId:params.row.hospitalId}).then(res => {
                                                if(res.data.code == 1){
                                                    this.modalStatus = true
                                                    let pharmacySendOrgDto = res.data.object.pharmacySendOrgDto
                                                    let receiverAddressDto = res.data.object.receiverAddressDto
                                                    this.formValidate.hospitalName = hospitalName
                                                    this.orderId = pharmacySendOrgDto.orderId
                                                    this.formValidate.province = receiverAddressDto.provinceName
                                                    this.formValidate.city = receiverAddressDto.cityName
                                                    this.formValidate.area = receiverAddressDto.areaName
                                                    this.formValidate.receiverName = receiverAddressDto.name
                                                    this.formValidate.phoneNumber = receiverAddressDto.phoneNumber
                                                    this.formValidate.addrInfo = receiverAddressDto.addressInfo
                                                    this.formValidate.hosAddr = pharmacySendOrgDto.hosAddr
                                                    this.formValidate.linkman = pharmacySendOrgDto.linkman
                                                    this.formValidate.telephone = pharmacySendOrgDto.telephone
                                                    this.formValidate.provinceCode = pharmacySendOrgDto.provinceCode
                                                    this.formValidate.cityCode = pharmacySendOrgDto.cityCode
                                                    this.formValidate.districtCode = pharmacySendOrgDto.districtCode
                                                }
                                                else {
                                                    this.$Message.error("获取详情失败")
                                                }
                                            })  
                                        }
                                    }
                                }, '邮寄') : null
                        ])
                    }
                }
            ],
            pageNo:1,
            pageSize: 10,
        };
    },
    created() {
        this.province = this.$route.query.provinceCode
            ? parseInt(this.$route.query.provinceCode)
            : null;
        this.city = this.$route.query.cityCode
            ? parseInt(this.$route.query.cityCode)
            : null;
        this.area = this.$route.query.areaCode
            ? parseInt(this.$route.query.areaCode)
            : null;
        this.hospital = this.$route.query.hospitalId
            ? parseInt(this.$route.query.hospitalId)
            : null;
        this.isBack = this.$route.query.isBack
            ? parseInt(this.$route.query.isBack)
            : 1;
        
        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "/index/maintain/systemManagement/index",
                title: "帐号权限配置"
            },
            {
                path: "/index/maintain/payment/index",
                title: "支付管理"
            }
        ];
        this.$emit("changeBreadList", breadList);
    },
    mounted() {
        let pageNo = this.$route.query.pageNo
        if (Boolean(pageNo)) {
            this.pageNo = Number(pageNo);
        }
        this.getDate(this.pageNo);
    },
    methods: {
        changeProvince(val) {
            this.province = val;
        },
        changeCity(val) {
            this.city = val;
        },
        changeArea(val) {
            this.area = val;
            console.log(this.area)
        },
        changeHospital(val) {
            this.hospital = val;
        },
        //重置
        modalReset(){
            this.province = ''
            this.city = ''
            this.area = ''
            this.hospital = ''
            this.val = ''
            this.time = [],
            this.memberName = null
            this.getDate(this.pageNo);
        },
        // 获取医院列表
        getDate(pageNo, val) {
            this.pageNo = pageNo
            let params = {
                pageNo,
                pageSize: 10
            };
            if (Boolean(val)) {
                params.hospitalName = val.trim();
            }
            params.provinceCode = this.province ? this.province : null;
            params.cityCode = this.city ? this.city : null;
            params.areaCode = this.area ? this.area : null;
            params.hospitalId = this.hospital ? this.hospital : null;
            params.memberName = this.memberName ? this.memberName : null;
            params.startTime =  Utils.getNowDateBySpecialFormat(this.time[0]);
            params.endTime =  Utils.getNowDateBySpecialFormat(this.time[1]);
            console.log(params);
            this.$axios.post(api.findWxInpMrcopyPage, params).then(res => {
                    if (res.data.code) {
                        let ret = res.data.object;
                        this.homeSize = ret.total;
                        if(ret.records){
                            ret.records.forEach((item,index) =>{
                                item.sum = this.addZeros(index)
                            })
                            this.tableList = ret.records
                        } else {
                            this.tableList = []
                        }                       
                    } else {
                        this.$Message.error("没有访问权限");
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        pageChange(index) {
            this.pageNo = index
            if (this.val != "") {
                this.getDate(index, this.val);
            } else {
                this.getDate(index);
            }
        },
        // 查询
        search() {
            this.getDate(1, this.val);
        },
        //保存
        handleSubmit (name) {
            this.isDisable = true
            this.$refs[name].validate((valid) => {
                if (valid) {
                    let expressOrderVo = {
                        "orderId": this.orderId,
                        "id":this.lineid,
                        //收件人
                        "DAddress":this.formValidate.addrInfo,
                        "DProvince":this.formValidate.province,
                        "DCity": this.formValidate.city,
                        "DCounty":this.formValidate.area,
                        "DContact":this.formValidate.receiverName,
                        "DTel":this.formValidate.phoneNumber,
                        //寄件人
                        "jaddress":this.formValidate.hosAddr,
                        "jprovince":this.formValidate.provinceCode,
                        "jcity": this.formValidate.cityCode,
                        "jcounty":this.formValidate.districtCode,
                        "jcompany":this.hospitalName,
                        "jcontact":this.formValidate.linkman,
                        "jtel":this.formValidate.telephone
                    }
                    console.log(expressOrderVo)
                    this.$axios.post(api.deliverGoods,expressOrderVo).then(res => {
                        if(res.data.success) {
                            this.$Message.success('订单操作成功')
                            // 重新加载列表
                            this.getDate();
                            this.isDisable = false;//放开点击了
                            // 弹窗数据初始化
                            this.handleReset('formValidate');
                            this.modalStatus = false;
                        } else {
                            this.isDisable = false;//放开点击了
                            this.$Message.error(res.data.message)
                        }
                    })
                } else {
                    this.$Message.error('请完整填写必填项!');
                    this.isDisable = false  //不可点击
                }
            })
        },
        // 取消保存
        handleReset (name) {
            this.modalStatus = false
            this.$refs[name].resetFields();
            this.formValidate.hospitalName = ''
            this.formValidate.phoneNumber = ''
            this.formValidate.receiverName = ''
            this.formValidate.addrInfo = ''
            this.formValidate.linkman = '',  
            this.formValidate.telephone = '',  
            this.formValidate.hosAddr = '',
            this.formValidate.provinceCode = '',
            this.formValidate.cityCode = '',
            this.formValidate.districtCode = ''
        },
    }
};
</script>

<style scoped lang = "less">
.management1 {
    width: calc(100%);
    padding: 10px;
    margin: 0 auto;
    background: #fff;
    .margin-up-down {
        display: inline-block;
        margin: 10px 0;
    }
    .btn {
        width: 58px;
        height: 32px;
    }
    header {
        width: 100%;
        display: flex;
        flex-direction: row;
        margin: 10px 0;
        span {
            color: #666;
            line-height: 30px;
            margin:0 10px;
        }
    }
}
.main{
    width: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid #f0f0f0;
    box-shadow: 0 4px 3px #ebedf8;
    border-radius: 5px;
    margin-bottom: 20px;
    .title {
        font-size: 20px;
        padding-left: 15px;
        margin-bottom: 20px;
        color: #333;
        height: 40px;
        line-height: 40px;
        background: #ebedf8;   
    }      
    .box{
        padding: 0 15px;
    }
    .mainbtn {
        width: 75px;
        height: 55px;
    }
}
</style>